<template>
	<view class="order-pages">
		<!-- #ifndef H5 -->
		<fixed top="0">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<fixed>
			<!-- #endif -->
				<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
					:width="100/tabList.length + '%'" height="100rpx"></tab>
				<view class="b-1px-b"></view>
			</fixed>
			<abnor v-if="list.length<=0"></abnor>
			<view v-else>
				<view @tap.stop="goDetail(index,'detail')"
					class="item-child mt-md ml-md mr-md pd-lg fill-base radius-16 rel" v-for="(item,index) in list"
					:key="index" v-if="item.is_diet == 1">
					<view v-if="item.is_add">
						<view class="bell-tag flex-center f-icontext c-base abs" :style="{background:primaryColor}">加钟服务
						</view>
						<view class="space-md"></view>
					</view>
					<view class="flex-between pb-lg b-1px-b">
						<view class="f-paragraph c-title max-450 ellipsis"
							@tap.stop="$util.goUrl({openType:'copy',url:item.order_code})">订单号：{{item.order_code}}
						</view>
						<!-- // pay_type 1待支付，2待服务，3技-师接单，4技-师出发，5技-师到达，6服务中，7服务完成 -->
						<view class="f-caption text-bold"
							:style="{color:item.pay_type==1?primaryColor: [2,3,4,5,6].includes(item.pay_type)?subColor: item.pay_type == 7 ? '#11C95E' : '#333'}">
							{{statusTypes[item.pay_type]}}
						</view>
					</view>
					<view class="flex-center mt-lg" v-for="(aitem,aindex) in item.order_goods" :key="aindex">
						<!-- #ifdef H5 -->
						<view class="cover radius-16">
							<view class="h5-image cover radius-16"
								:style="{ backgroundImage : `url('${aitem.goods_cover}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" class="cover radius-16" :src="aitem.goods_cover"></image>
						<!-- #endif -->
						<view class="flex-1 ml-md" style="display: flex;
    justify-content: space-between;">
							<view class="">
								<view class="flex-between">
									<view class="f-mini-title c-title text-bold max-400 ellipsis">
										{{aitem.goods_name}}
									</view>
									
								</view>
								<view class="flex-center"
									:style="{marginTop:aindex==item.order_goods.length-1?'6rpx':'20rpx'}"
									v-if="item.is_diet == 1">
									<view class="flex-1 flex-y-center f-caption c-caption">
										用餐房间：{{item.house.title}}
									</view>
								</view>
								<view class="flex-center"
									:style="{marginTop:aindex==item.order_goods.length-1?'6rpx':'20rpx'}"
									v-if="item.is_diet == 0">
									<view class="flex-1 flex-y-center f-caption c-caption">服务{{$t('action.attendantName')}}
										<view class="ml-md max-280 ellipsis">
											{{item.coach_info ? item.coach_info.coach_name : '-'}}
										</view>
									</view>
									<view class="f-caption c-warning" v-if="aitem.refund_num>0">已退x{{aitem.refund_num}}
									</view>
								</view>
								<view class="flex-y-center f-caption c-caption" v-if="aindex==item.order_goods.length-1">总计：
									<view class="flex-y-baseline c-warning text-bold">¥
										<view class="f-title">{{item.pay_price}}</view>
									</view>
								</view>
							</view>
							<view class="" style="display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;">
								<view class="f-desc c-desc">x{{aitem.num}}</view>
								<view class="btn" v-if="item.pay_type == 2" @click.stop="jiedan(item.id,3)">
									立即接单
								</view>
								<view class="btn" v-if="item.pay_type == 3" @click.stop="jiedan(item.id,6)">
									准备好了
								</view>
								<view class="btn" v-if="item.pay_type == 6" @click.stop="jiedan(item.id,7)">
									订单完成
								</view>
							</view>
						</view>
					</view>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<view class="flex-center"
							:style="{marginTop:aindex==item.order_goods.length-1?'6rpx':'20rpx'}">
							<view class="flex-1 flex-y-center f-caption c-caption">
								下单人：{{item.user.nickName}}
							</view>
						</view>
						<view class="flex-center"
							:style="{marginTop:aindex==item.order_goods.length-1?'6rpx':'20rpx'}">
							<view class="flex-1 flex-y-center f-caption c-caption">
								联系方式：{{item.user.phone}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</fixed>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				tabList: [{
					title: '全部',
					id: 0
				}, {
					title: '待支付',
					id: 1,
					// number: 10
				},  {
					title: '待接单',
					id: 5
				},{
					title: '已接单',
					id: 3
				}, {
					title: '用餐中',
					id: 6
				}, {
					title: '已完成',
					id: 7
				}],
				statusType: {
					'-1': '已取消',
					1: '待支付',
					2: '待服务',
					// 3: this.$t('action.attendantName') + '接单',
					// 4: this.$t('action.attendantName') + '出发',
					// 5: this.$t('action.attendantName') + '到达',
					6: '服务中',
					7: '已完成',
					// 8: '待转单'
				},
				statusTypes: {
					'-1': '已取消',
					1: '待支付',
					2: '待接单',
					3: '已接单',
					// 4: this.$t('action.attendantName') + '出发',
					// 5: this.$t('action.attendantName') + '到达',
					6: '用餐中',
					7: '已完成',
					// 8: '待转单'
				},
				primaryColor: '#1eb481',
				param: {
					pages: 1,
					pay_type: 0
				},
				list: [],
				last_page: 0,
				current_page: 0
			}
		},
		async onLoad(options) {
			this.getList()
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.getList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.current_page >= this.last_page) {
				uni.showToast({
					icon: 'error',
					title: '暂无数据'
				})
				return;
			}
			this.param.page = Number(this.param.page) + 1
			this.getList()
		},
		methods: {
			handerTabChange(index) {
				uni.pageScrollTo({
					scrollTop: 0
				})
				// this.list = []
				this.activeIndex = index
				this.param.pay_type = this.tabList[index].id
				this.getList()
			},
			async getList() {
				let list = await this.$api.technicianadd.allEatOrder(this.param)
				console.log(list);
				this.list = list.data
				this.last_page = list.last_page
				this.current_page = list.current_page
				this.$util.hideAll()
			},
			goDetail(index, page) {
				let {
					id
				} = this.list[index]
				let url = `/user/pages/order/${page}?id=${id}&type=9`
				this.$util.goUrl({
					url
				})
			},
			async jiedan(id,type){
				let data = await this.$api.technicianadd.changeEatOrder({
					order_id:id,
					 pay_type:type
				})
				let title = ''
				if(type == 3){
					title = '接单成功'
				}
				if(type == 6){
					title = '开始用餐'
				}
				if(type == 7){
					title = '结束用餐'
				}
				uni.showToast({
					icon: 'success',
					title: title
				})
				this.getList()
			}
		}
	}
</script>


<style lang="scss">
	.btn{
		background-color: #07c160;
		color: #fff;
		border-radius: 18rpx;
		text-align: center;
		padding: 20rpx 16rpx;
		font-size: 28rpx;
	}
</style>